//src/App.vue

<template>
<div id="event-handling">
  <p>{{ message }}</p>
  <button @click="reverseMessage(message)">反转 Message</button>
</div>
</template>

<script lang="ts">
import {  defineComponent,  ref } from 'vue'

export default defineComponent({
  name: 'App',
  setup() {
    const message = ref('Hello Vue.js!')

    const reverseMessage = (msg) => {
      message.value = msg.split('').reverse().join('')
    }

    return {
      message,  //从 setup 返回的 refs 在模板中访问时是被自动解开的，因此不应在模板中使用 .value
      reverseMessage
    }
  }
})
</script>